<script setup lang="ts">
	import { useCorps } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
	import { ref } from "vue";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
		handleDelete,
		basicPar,
		WCSswitch
	} = useCorps();
	const formRef = ref();
</script>

<template>
	<div class="main">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>基本参数</span>
						</div>
					</template>
					<div v-for="(item, index) in basicPar" :key="index" class="text item flex flex-bc"
						style="border-bottom: 1px solid #e7e7e7;padding: 5px 0;">
						<div style="width: 280px;">
							<span style="margin-right: 10px;">{{index+1}}.</span>
							<span>{{item.name}}</span>
						</div>
						<el-link type="primary" :underline="false">设置</el-link>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>系统日志</span>
						</div>
					</template>
					<div v-for="(item, index) in basicPar" :key="index" class="text item flex flex-bc"
						style="border-bottom: 1px solid #e7e7e7;padding: 5px 0;">
						<div style="width: 280px;">
							<span style="margin-right: 10px;">{{index+1}}.</span>
							<span>{{item.name}}</span>
						</div>
						<el-link type="primary" :underline="false">设置</el-link>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>WCS开关</span>
						</div>
					</template>
					<div v-for="(item, index) in WCSswitch" :key="index" class="text item flex flex-bc"
						style="border-bottom: 1px solid #e7e7e7;padding: 5px 0;">
						<div style="width: 280px;">
							<span style="margin-right: 10px;">{{index+1}}.</span>
							<span>{{item.name}}</span>
						</div>
						<el-switch v-model="item.isSwitch" class="ml-2"
							style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span>显示列表</span>
						</div>
					</template>
					<div v-for="(item, index) in basicPar" :key="index" class="text item flex flex-bc"
						style="border-bottom: 1px solid #e7e7e7;padding: 5px 0;">
						<div style="width: 280px;">
							<span style="margin-right: 10px;">{{index+1}}.</span>
							<span>{{item.name}}</span>
						</div>
						<el-link type="primary" :underline="false">设置</el-link>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}

	:deep(.el-switch__core .el-switch__action) {
		border-radius: 0;
	}

	:deep(.el-switch__core) {
		border-radius: 0;
	}
</style>